<template>
   <div class="zhuanlan">
 
      <mt-header style="background-color:#339933;height:3em;opacity:0.8;" fixed title="专栏" class="header">
        
      </mt-header>

      <div class="fenge1" style="margin-top:5%;"></div>

       <div class="page-navbar">
   
    <mt-navbar class="page-part" v-model="selected">
      <mt-tab-item id="1">旅游</mt-tab-item>
      <mt-tab-item id="2">文学</mt-tab-item>
      <mt-tab-item id="3">娱乐</mt-tab-item>
      <mt-tab-item id="4">音乐</mt-tab-item>
    </mt-navbar>

    <div class="fenge" style="opacity:0.5;"></div>

    <mt-tab-container v-model="selected">
      <mt-tab-container-item id="1">
   
        <div v-for="(item,index) in book_lvyou" class="lvv" >      
                    <div class="fang" @click="togo(index)"></div>
                    <div class="wen" @click="togo(index)">{{book_lvyou[index]}}</div>        
                    <div class="wen1" @click="togo(index)" >{{book_guanzhu[index]}}</div> 
                    <div class="fenge1" style="margin-top:2%;opacity: 0.5;"></div>
                    <div class="wen2" @click="togo(index)">{{book_gengxin[index]}}</div>
                    <img style="width: 6%;margin-left: -85%;margin-top:2%;" src="../assets/zhuanlan/14.png">
                    <div class="wen3">{{book_biaoqian[index]}}</div>
                     <mt-button size="small" class="btnn" >+ 关注</mt-button> 
                    <div class="fenge" style="opacity:0.5;"></div>                                 
         </div>

      
      </mt-tab-container-item>
      <mt-tab-container-item id="2">
        <div class="lvv">
            <div class="fang"></div>
            <div class="wen">老摇滚</div>
            <div class="wen1">4581人关注 | 45文章</div>
            <div class="fenge1" style="margin-top:2%;opacity: 0.5;"></div>
            <div class="wen2">最近更新：记起我曾经藏利刀</div>
            <img style="width: 6%;margin-left: -85%;margin-top:2%;" src="../assets/zhuanlan/14.png">
            <div class="wen3">音乐 民谣</div>
            <div class="btnn">+ 关注</div>
            <div class="fenge" style="opacity:0.5;"></div>
        </div>

       
      </mt-tab-container-item>
      <mt-tab-container-item id="3">
       
        <div class="lvv">
            <div class="fang"></div>
            <div class="wen">老摇滚</div>
            <div class="wen1">4581人关注 | 45文章</div>
            <div class="fenge1" style="margin-top:2%;opacity: 0.5;"></div>
            <div class="wen2">最近更新：记起我曾经藏利刀</div>
            <img style="width: 6%;margin-left: -85%;margin-top:2%;" src="../assets/zhuanlan/14.png">
            <div class="wen3">音乐 民谣</div>
            <div class="btnn">+ 关注</div>
            <div class="fenge" style="opacity:0.5;"></div>
        </div>
      </mt-tab-container-item>
      <mt-tab-container-item id="4">

        <div class="lvv">
            <div class="fang"></div>
            <div class="wen">老摇滚</div>
            <div class="wen1">4581人关注 | 45文章</div>
            <div class="fenge1" style="margin-top:2%;opacity: 0.5;"></div>
            <div class="wen2">最近更新：记起我曾经藏利刀</div>
            <img style="width: 6%;margin-left: -85%;margin-top:2%;" src="../assets/zhuanlan/14.png">
            <div class="wen3">音乐 民谣</div>
            <div class="btnn">+ 关注</div>
            <div class="fenge" style="opacity:0.5;"></div>
        </div>
      </mt-tab-container-item>
   

    </mt-tab-container>
  </div>
      




   </div>
</template>

<script>
    export default{
        data(){
            return{
                 selected: '1',
                  book_lvyou:[
                    "老摇滚","老摇滚","老摇滚","老摇滚","老摇滚","老摇滚","老摇滚","老摇滚"
                ],
                 book_guanzhu:[
                    "4581人关注 | 45文章",
                    "4581人关注 | 45文章",
                    "4581人关注 | 45文章",
                    "4581人关注 | 45文章",
                    "4581人关注 | 45文章",
                    "4581人关注 | 45文章",
                    "4581人关注 | 45文章",
                    "4581人关注 | 45文章"
                ],
                book_biaoqian:[
                    "音乐 民谣","音乐 民谣","音乐 民谣","音乐 民谣","音乐 民谣","音乐 民谣","音乐 民谣","音乐 民谣"
                ],
                 book_gengxin:[
                    "最近更新：记起我曾经藏利刀",

                    "最近更新：记起我曾经藏利刀",

                    "最近更新：记起我曾经藏利刀",

                    "最近更新：记起我曾经藏利刀",

                    "最近更新：记起我曾经藏利刀",

                    "最近更新：记起我曾经藏利刀",

                    "最近更新：记起我曾经藏利刀",

                    "最近更新：记起我曾经藏利刀",
                ],
                  book_engName:[
                    "booo_1","booo_2","booo_3","booo_4","booo_5","booo_6","booo_7","booo_8"
                ],

            }
        },
        methods:{

             getbook_ico(i){
                return this.book_ico[i];
            },
            go(id){
                this.$store.commit("changeStyle",2.5);
                //id在store中找到
                this.$store.commit("choosebooks",id);

                this.$router.push({path:"booksView"});
            },
            togo(index){
                var id=this.book_engName[index];
                this.go(id);
            },
           
        }
    }
</script>

<style>
    .zhuanlan{
        background-color:#ffffff;
        height: auto;
        padding-top:10%;
        padding-bottom:200%;
        margin-bottom:-18%;
        margin-top:-1%;
    }

    .lvv{
        width:100%;
        height:auto;
        
        float: left;
    }

    .fang{
        width: 10%;
        height:40px;
        background-color: #339933;   
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        margin-top:5%;
        margin-left: 5%;
    }

    .wen{
        color:#339933;
        font-size:130%;
        margin-left:-50%;
        margin-top:-10%;
       
    }

    .wen1{
        color:#339933;
        margin-left:-32%;
    }

    .wen2{
        color:#339933;
        margin-top:5%;
        margin-left: -45%;
    }

    .wen3{
        color:#339933;
        margin-top:-5%;
        margin-left: -65%;
    }
    .btnn{
        width:17%;
        height: 25px;
        color:#339933;
        
        margin-left: 75%;
        margin-top:-15%;
        border: 2px #339933 solid;

       
    }

  


  

</style>